<template>
    <div class="con">
        <div class="header">
            <p>请绑定持卡人本人的信用卡</p>
        </div>

        <div class="info1">
            <dl>
                <dd>持卡人</dd>
                <dt>
                    <p>{{accountName}}</p>
                </dt>
            </dl>

            <dl class="last">
                <dd>银行卡号</dd>
                <dt>
                    <input
                        type="text"
                        placeholder="请输入信用卡卡号"
                        @keyup="bankNumberCheck()"
                        v-model="accountNo"
                        pattern="[0-9]*"
                        maxlength="23"
                    >
                </dt>
            </dl>
        </div>

        <div class="btn" @click="ok()">
            <button>下一步</button>
        </div>
    </div>
</template>

<script>
export default {
    name: "addcreditcard",
    data() {
        return {
            accountName: "",
            accountNo: "",
            timestamp: ""
        };
    },
    methods: {
        // 银行卡数字正则匹配
        bankNumberCheck() {
            this.accountNo = this.accountNo
                .replace(/\D/g, "")
                .replace(/(\d{4})(?=\d)/g, "$1 ");
        },

        ok() {
            if (this.accountNo == "") {
                this.$toast("请输入信用卡卡号");
            } 
             else {
                    this.axios({
                method: "post",
                url: `${
                    this.siteUrl
                }/app/bankCard/getBankInfo?appid=web.2019&format=json&timestamp=${
                    this.timestamp
                }`,
                data: {
                    userId: localStorage.getItem("userId"),
                    bankNo: this.accountNo.replace(/\s/g, ""),
                    cardType: 1,
                    channelId: 5
                }
            })
                .then(response => {
                    console.log(response);
                    if (response.data.success == 1) {
                        localStorage.setItem("xykaccountNo", this.accountNo);
                        localStorage.setItem("xykbankName",response.data.data.bankName);
                        localStorage.setItem("xykbankId",response.data.data.id);
                        localStorage.setItem("imgStatus",response.data.data.imgStatus);
                        this.$router.push({ name: "addcreditcardnext",params:{type:this.$route.params.type} });

                    } else {
                        this.$toast(response.data.message);
                    }
                })
                .catch(error => {
                    console.log(error);
                    this.$toast("连接服务器异常");
                });
            }
        }
    },
    mounted() {
        this.timestamp = Date.parse(new Date());
                          
                       


        this.accountName = localStorage.getItem("accountName");
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.con {
    width: 100%;
    min-height: 100vh;
    background: #f9f9f9;
    overflow: hidden;
}
.con .header {
    width: 100%;
    height: 42px;
    text-align: center;
    margin-top: 20px;
}
.con .header p {
    line-height: 22px;
    color: #a6a9b5;
    font-weight: 200;
    font-size: 14px;
}
.con .info1 {
    background: #fff;
}

.con .info1 dl {
    height: 60px;
    border-bottom: 1px solid #ececec;
    width: 90%;
    margin-left: 5%;
}
.con .info1 dd {
    line-height: 60px;
    color: #2d3659;
    font-weight: 200;
    float: left;
}
.con .info1 dt {
    float: right;
    width: 200px;
    height: 60px;
    line-height: 60px;
    position: relative;
    text-align: right;
    color: #2d3659;
}
.con .info1 span {
    position: absolute;
    right: -10px;
    top: 0px;
    color: #ffae4e;
}
.con .info1 .last {
    border: none;
}
.con .info1 dt input {
    text-align: right;
    width: 200px;
}

.btn {
    width: 90%;
    height: 48px;
    line-height: 48px;
    background: #ffae4e;
    text-align: center;
    border-radius: 25px;
    box-shadow: 0px 10px 30px 0px #fbc27f;
    position: fixed;
    bottom: 40px;
    left: 5%;
}
.btn button {
    width: 100%;
    font-size: 17px;
    color: #fff;
    background: transparent;
}

input::-webkit-input-placeholder {
    color: #e9eaee;
    font-size: 14px;
}
</style>
